Dark mode #359
Dark mode #359
Conversation
|
Hamburger on mobile needs dark mode styling
|
jerelmiller
removed
the
work in progress
There was a problem hiding this comment.
I noticed a bug with the code blocks
When you refresh the page, the theme does not stay in the dark theme
Steps to reproduce:
- Go to a page with code blocks (I went to
Query Data with NRQL) - Switch to dark mode
- Refresh the page
Screenshots
I also noticed that the sidebar then expands all the way when refreshing
| </ExternalLink> | ||
| </li> | ||
| <li className={styles.rightSideButton}> | ||
| <FeatherIcon | ||
| name={darkMode.value ? 'sun' : 'moon'} |
There was a problem hiding this comment.
Nitpick: I noticed that, when the site first loads, the moon icon is displayed momentarily. I suspect this is due to darkMode.value being falsy. We may want to not show the icon at all until we have access to that variable. It seems like the OSS site operates this way.
There was a problem hiding this comment.
I might log this as a separate issue. I think it has to do with the fact that its a pre-rendered page, which doesn't have access to the local storage/media queries. Even if we hide it, there will still be a flash of content, which would be nice to avoid altogether.
Thoughts? Or should I try and solve this in this PR?
There was a problem hiding this comment.
Turns out it's more complicated than I thought. I logged this issue in #385. Its annoying, but not a blocker for now, so lets fix at a later time. This will allow us to get this out the door sooner.
|
You're right. Good catch. I need to do a bit of research to determine how to avoid this scenario. I suspect its because this page is "server rendered", with no access to local storage or media queries. |
This bug is logged in #340 and outside the scope of this PR since its an existing bug. |
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Closes #310
Description
Implement dark mode for the developer site. Adds the color palette and updates existing usage of colors to work with an abstracted set of values.
Screenshot(s)